<template>
  <div class="info-box" v-if="Object.keys(goods).length != 0">
    <div class="title">{{goods.productTitle}}</div>
    <div class="price-box">
      <span class="presentPrice">{{goods.presentPrice | tomoney}}</span>
      <span class="originalPrice">{{goods.originalPrice | tomoney}}</span>
      <span class="actived">活动价</span>
    </div>
    <div class="tags">
      <span v-for="(item,index) of goods.tags" :key="index">{{item}}</span>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {

      }
    },
    props:{
      goods:{}
    },
    filters: {
      actualurl(value) {
        return "http://dev.api.sqiandai.com" + value;
      },
      tomoney(value) {
        return "$ " + value
      }
    }
  }
</script>

<style scoped="scoped">
  .info-box {
    padding: 5px;
    border-bottom: 3px solid #eee;;
  }
  .price-box{
    display: flex;
    align-items: center;
    justify-content: flex-start;

  }
  .price-box span{
     margin-right: 15px;
  }
  .presentPrice{
    color: var(--color-high-text);
  }
  .originalPrice{
    font-size: 12px;
    text-decoration:line-through;
  }
  .actived{
    background-color: var(--color-tint);
    color: white;
    border-radius: 10px;
    font-size: 14px;
    padding: 2px 4px;
  }
  .tags{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
</style>
